<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .oldGreen {
        background: #087;
      }
    </style>
  </head>
  <body>
    <div class="the_div">
      <p>我是p标签</p>
      <h3>我是h3</h3>
      <h3>我是h3</h3>
      <h3>我是h3</h3>
      <a id="theA" href="#">我是一个a标签</a>
      <ul>
        <li>北京</li>
        <li>天津</li>
        <li>南京</li>
      </ul>
      <ol class="my_li">
        <li>大张</li>
        <li>大王</li>
        <li>大狗</li>
      </ol>
      <ul class="my_lis">
        <li>小明</li>
        <li>小红</li>
        <li>小蓝</li>
      </ul>
    </div>
    <script>
      const ids = document.getElementById('theA');
      console.log(ids);
      const hs = document.querySelectorAll('h3');
      console.log(hs);
      const lis = document.querySelectorAll('li');
      console.log(lis);
      const little = document.querySelectorAll('.my_lis li');
      console.log(little);
      const xiaoH = document.querySelector('.my_lis li:nth-child(2)');
      xiaoH.innerHTML = `小六`;
      xiaoH.style.color = 'red';
      const uls = document.querySelector('ul li:nth-child(2)');
      uls.className = 'oldGreen';
    </script>
  </body>
</html>
